<template>
	<view class="scroll-tab">
		<view class="tab-wrapper" ref="wrapper">
			<view class="tab">
				<view class="tab-item" v-for="(item,index) in tabs"
				      :key="index"
				      ref="items"
				      @click="clickTabItem(index)">
					{{ T(item) }}
				</view>
				<view class="indicator" ref="indicator" :style="indicatorStyle"></view>
			</view>
		</view>
	</view>
</template>

<script>
    import Velocity from 'velocity-animate'

    export default {
        name: "ScrollTab",
        props: {
            tabs: Array,
            initialIndex: {
                type: Number,
                default: 0
            },
            normalColorArr: Array,//未选中的颜色rgb
            checkedColorArr: Array,//选中的颜色rgb
            indicatorOffset: {//指示条的缩进
                type: Number,
                default: 0
            },
            onTabItemClick: Function
        },
        data() {
            const T = this.$t.bind(this)
            const normalColor = `rgba(${this.normalColorArr[0]}, ${this.normalColorArr[1]}, ${this.normalColorArr[2]}, 1)`
            const checkedColor = `rgba(${this.checkedColorArr[0]}, ${this.checkedColorArr[1]}, ${this.checkedColorArr[2]}, 1)`
            return {
                T,
                indicatorStyle: {
                    left: '0px',
                    width: '0px'
                },
                isAnimation: false,
                curIndex: this.initialIndex,
                normalColor,
                checkedColor
            }
        },
        methods: {
            setScrollProgress(progress, startItem, endItem) {
                if (startItem && endItem) {
                    this.indicatorStyle.left = (startItem.offsetLeft + (endItem.offsetLeft - startItem.offsetLeft) * progress) + this.indicatorOffset + 'px'
                    this.indicatorStyle.width = (startItem.offsetWidth + (endItem.offsetWidth - startItem.offsetWidth) * progress) - this.indicatorOffset * 2 + 'px'
                    this.changeColor(startItem, this.checkedColorArr, this.normalColorArr, progress)
                    this.changeColor(endItem, this.normalColorArr, this.checkedColorArr, progress)
                } else {
                    const targetItem = startItem || endItem;
                    if (targetItem) {
                        this.indicatorStyle.left = targetItem.offsetLeft + this.indicatorOffset + 'px'
                        this.indicatorStyle.width = targetItem.offsetWidth - this.indicatorOffset * 2 + 'px'
                        this.changeColor(targetItem, this.checkedColorArr)
                    }
                }

            },
            changeColor(el, startColor, endColor, progress) {
                if (startColor && endColor) {
                    const r = startColor[0] + (endColor[0] - startColor[0]) * progress
                    const g = startColor[1] + (endColor[1] - startColor[1]) * progress
                    const b = startColor[2] + (endColor[2] - startColor[2]) * progress
                    el.style.color = `rgba(${r}, ${g}, ${b}, 1)`
                } else {
                    const targetColor = startColor || endColor
                    if (targetColor) {
                        el.style.color = `rgba(${targetColor[0]}, ${targetColor[1]}, ${targetColor[2]}, 1)`
                    }
                }
            },
            setItemVisible(index, isLeft) {
                const tabItem = this.$refs.items[index].$el;
                if (isLeft) {
                    const marginLeft = parseInt(this.getElementStyle(tabItem, 'marginLeft'))
                    const target = tabItem.offsetLeft - marginLeft;
                    if (target < this.$refs.wrapper.$el.scrollLeft) {
                        this.$refs.wrapper.$el.scrollLeft = target;
                    }
                } else {
                    const marginRight = parseInt(this.getElementStyle(tabItem, 'marginRight'))
                    const target = tabItem.offsetLeft + tabItem.offsetWidth + marginRight - this.$refs.wrapper.$el.offsetWidth
                    if (target > this.$refs.wrapper.$el.scrollLeft) {
                        this.$refs.wrapper.$el.scrollLeft = target;
                    }
                }
            },
            setCurIndex(index) {
                if (this.curIndex < index) {
                    const nextIndex = index < this.$refs.items.length - 1 ? index + 1 : index
                    this.setItemVisible(nextIndex, false)
                } else {
                    const prevIndex = index > 0 ? index - 1 : index;
                    this.setItemVisible(prevIndex, true)
                }
                this.curIndex = index
            },
            scrollTo(index, progress) {
                if (progress === 0) {
                    const curItem = this.$refs.items[index].$el;
                    this.indicatorStyle.left = curItem.offsetLeft + this.indicatorOffset + 'px'
                    this.indicatorStyle.width = curItem.offsetWidth - this.indicatorOffset * 2 + 'px'
                    this.$refs.items.forEach((item, i) => {
                        item.$el.style.color = index === i ? this.checkedColor : this.normalColor
                    })
                } else {
                    const targetIndex = progress > 0 ? index + 1 : index - 1
                    if (targetIndex < 0 || targetIndex >= this.tabs.length) {
                        return
                    }
                    const curItem = this.$refs.items[index].$el;
                    const targetItem = this.$refs.items[targetIndex].$el;
                    if (progress > 0) {
                        this.setScrollProgress(progress, curItem, targetItem)
                    } else {
                        this.setScrollProgress(1 + progress, targetItem, curItem)
                    }
                }
            },
            clickTabItem(index) {
                if (this.isAnimation || this.curIndex === index) {
                    return
                }
                this.onTabItemClick(index)
                const curItem = this.$refs.items[this.curIndex].$el;
                const targetItem = this.$refs.items[index].$el;
                const self = this
                Velocity(this.$refs.indicator.$el, {tween: [1, 0]},
                    {
                        duration: 250,
                        begin() {
                            self.isAnimation = true
                        },
                        progress(elements, complete, remaining, start, tweenValue) {
                            self.setScrollProgress(tweenValue, curItem, targetItem)
                        },
                        complete() {
                            self.setCurIndex(index)
                            self.isAnimation = false
                        }
                    }
                )
            },

            getElementStyle(ele, attr) {
                if (window.getComputedStyle) {
                    return getComputedStyle(ele, null)[attr];//pseudoElt 可选 指定一个要匹配的伪元素的字符串。
                } else {
                    return ele.currentStyle[attr];
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.$refs.items.forEach((item, index) => {
                    if (index === this.curIndex) {
                        item.$el.style.color = this.checkedColor
                        this.indicatorStyle.left = item.$el.offsetLeft + this.indicatorOffset + 'px'
                        this.indicatorStyle.width = item.$el.offsetWidth - this.indicatorOffset * 2 + 'px'
                    } else {
                        item.$el.style.color = this.normalColor
                    }
                })
            })
        }
    }
</script>

<style lang="scss">
	
	.scroll-tab {
		font-size: 0;
		overflow: hidden;
		height: 40px;
		
		.tab-wrapper {
			overflow-x: scroll;
			overflow-y: hidden;
			height: 100px;
		}
		
		.tab {
			position: relative;
			display: inline-block;
			height: 40px;
			white-space: nowrap;
		}
		
		.tab-item {
			height: 40px;
			display: inline-block;
			line-height: 40px;
			font-size: 14px;
			margin: 0 5px;
		}
		
		
		.indicator {
			height: 3px;
			border-radius: 1.5px;
			position: absolute;
			bottom: 0;
			background-color: $global;
		}
	}


</style>
